new Vue({
    el:'.wrapper',
    data:{
        userData:[],
        mask:false,
        admin_place:false,
        admin_schedule:false,
        editC:false,
        placeData:[],
        scheduleData:[],
        loginData:{
            username:'',
            password:''
        },
        addPlace:{
            name:'',
            latitude:'',
            longitude:'',
            x:'',
            y:'',
            description:'',
        },
        editPlace:{
            id:'',
            name:'',
            latitude:'',
            longitude:'',
            x:'',
            y:'',
            description:'',
        },
        addScheData:{
            type:'',
            line:'',
            from_place_id:'',
            to_place_id:'',
            departure_time:'',
            arrival_time:'',
            distance:'',
            speed:'',
            status:''
        }
    },
    methods:{
        login:function () {
            let status = 0;
            var formData = new FormData();
            formData.append('username',this.loginData.username);
            formData.append('password',this.loginData.password);
            fetch(`api/v1/auth/login`,{method:'post',body:formData}).then(res=>{
                status = res.status;
                return res.json();
            }).then(res=>{
                if (status==200){
                    this.userData=res;
                    this.userData.username = this.loginData.username;
                    this.loginData.username = '';
                    this.loginData.password = '';
                    localStorage.setItem('user',JSON.stringify(this.userData));
                    this.mask=false;
                    this.resPlace();
                }else {
                    alert(res);
                }
            })
        },
        logout:function () {
            fetch(`api/v1/auth/logout?token=${this.userData.token}`).then(res=>{
                if (res.status==200){
                    this.userData=[];
                    this.placeData=[];
                    localStorage.removeItem('user');
                }
                return res.json();
            }).then(res=>{
                alert(res);
            })
        },
        resPlace:function () {
            fetch(`api/v1/place?token=${this.userData.token}`).then(res=>res.json()).then(res=>{
                this.placeData = res;
            })
        },
        resSchedule:function(){
            fetch(`api/v1/schedule?token=${this.userData.token}`).then(res=>res.json()).then(res=>{
                this.scheduleData = res;
            })
        },
        gShow:function (i) {
            if (this.$refs.svg[i].style.opacity==0){
                this.$refs.svg[i].style.opacity=1;
            }else {
                this.$refs.svg[i].style.opacity=0;
            }
        },
        placeDel:function (id) {
            fetch(`api/v1/place/${id}?token=${this.userData.token}`,{method:'delete'}).then(res=>{
                if (res.status==200){
                    this.placeData = this.placeData.filter(function (v) {
                        return v.id!=id;
                    });
                }
                return res.json();
            }).then(res=>{
                alert(res);
            })
        },
        createPlace:function () {
            let formData = new FormData();
            for (let v in this.addPlace){
                formData.append(v,this.addPlace[v]);
            }
            formData.append('image',this.$refs.image.files[0]);
            fetch(`api/v1/place?token=${this.userData.token}`,{method:'post',body:formData}).then(res=>{
                if (res.status==200){
                    this.resPlace();
                    for (let v in this.addPlace){
                        this.addPlace[v] = '';
                    }
                }
                return res.json();
            }).then(res=>{
                alert(res);
            })
        },
        placeEdit:function (obj) {
            this.editC=true;
            for (let v in this.editPlace){
                this.editPlace[v] = obj[v];
            }
        },
        subEdit:function () {
            let formData = new FormData();
            for (let v in this.editPlace){
                formData.append(v,this.editPlace[v]);
            }
            formData.append('image',this.$refs.editImage.files[0]);
            formData.append('_method','put');
            fetch(`api/v1/place/${this.editPlace.id}?token=${this.userData.token}`,{method:'post',body:formData}).then(res=>{
                if (res.status==200){
                    this.resPlace();
                    this.editC=false;
                    for (let v in this.editPlace){
                        this.editPlace[v] = '';
                    }
                }
                return res.json();
            }).then(res=>{
                alert(res);
            })
        },
        scheduleDel:function (id) {
            fetch(`api/v1/schedule/${id}?token=${this.userData.token}`,{method:'delete'}).then(res=>{
                if (res.status==200){
                    this.scheduleData = this.scheduleData.filter(function (v) {
                        return v.id!=id;
                    });
                }
                return res.json();
            }).then(res=>{
                alert(res);
            })
        },
        createSchedule:function () {
            let formData = new FormData();
            for (let v in this.addScheData){
                formData.append(v,this.addScheData[v]);
            }
            fetch(`api/v1/schedule?token=${this.userData.token}`,{method:'post',body:formData}).then(res=>{
                if (res.status==200){
                    this.resPlace();
                    for (let v in this.addScheData){
                        this.addScheData[v] = '';
                    }
                }
                return res.json();
            }).then(res=>{
                alert(res);
            })
        }
    },
    computed:{
        loginStatus:function () {
            return this.userData.length==0;
        }
    },
    created(){
        let user = localStorage.user;
        if (user){
            this.userData=JSON.parse(user);
            this.resPlace();
            this.resSchedule();
        }
    }
});